<template>
  <div class="btn">
    <span>*</span>会员姓名：<input
      type="text"
      v-model="input"
      placeholder="请输入姓名"
    />
    <span>*</span>手机号码：<input
      type="text"
      placeholder="请输入手机号"
      v-model="input1"
    />
    <span>*</span>医嘱单编号：<input
      type="text"
      placeholder="请输入会员编号"
      v-model="input2"
    />
    <el-button color="#6096DB" class="select" @click="search">查询</el-button>
    <!-- <el-button color="#EE8E65" class="select" @click="nmember"
      >+新增会员
    </el-button> -->
  </div>

  <div class="list">顾客列表</div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="linkman" label="联系人" width="70" />
    <el-table-column prop="sex" label="性别" width="70" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="number" label="医嘱单编号" />
    <el-table-column prop="goodsAddress" label="家庭住址" />
    <el-table-column prop="notvip" label="顾客类型" />
    <el-table-column prop="money" label="消费" width="70" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button>查看</el-button>

        <!-- <el-button @click="remove(scope.row.phone)">
          删除</el-button> -->
        <el-popconfirm
          title="你确定要删除吗?"
          @confirm="confirm(scope.row.phone)"
          @cancel="cancel"
        >
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    :page-size="10"
    layout="prev, pager, next"
    :total="total"
    @current-change="pageChange"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import "@/mock/nomember";
import axios from "axios";
import type { remove } from "_@vue_shared@3.2.45@@vue/shared";
import type { Search } from "@element-plus/icons-vue";
import router from "@/router";
import { useRouter } from "vue-router";

interface ItemType {
  doctor: string;
  sex: string;
  phone: number;
  number: number;
  goodsAddress: string;
  card: string;
  money: number;
}

const input = ref<string>("");
const input1 = ref<number>();
const input2 = ref<number>();
const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);
//当前第几页
let page = 1;

const remove = (phone: number) => {
  console.log(phone);
};
//查询
const search = () => {
  page = 1;
  getData();
};

onMounted(() => {
  getData();
});

const getData = () => {
  axios
    .post("/api/nomember/list", {
      pageSize: 10,
      currentPage: page,
      search: input.value || input1.value || input2.value,
    })
    .then((res) => {
      tableData.value = res.data.result;
      total.value = res.data.count;
    });
};

const pageChange = (page1: number) => {
  page = page1;
  getData();
};

//删除按钮
const confirm = (phone: number) => {
  console.log("确定删除", phone);
  axios
    .post("/api/nomember/del", {
      phone: phone,
    })
    .then((res) => {
      getData();
    });
};

const cancel = () => {
  console.log("取消");
};
//跳转
// const nmember = () => {
//   router.push("/home/newmember");
// };
</script>
<style lang="less" scoped>
.btn {
  margin-top: 2px;
  border: 1px solid #fff;
  background: #fff;
  height: 80px;
  line-height: 80px;
  font-size: 16px;
  span {
    color: red;
  }
  input {
    width: 150px;
    height: 32px;
    margin-right: 20px;
  }
  .select {
    width: 80px;
    height: 24px;
    color: white;
  }
}
.el-pagination {
  margin-top: 10px;
  justify-content: flex-end;
}
.list {
  margin: 15px 0 5px 0;
}
</style>
